<template>
  <KView class="auction-view">
    <KView class="auction-view-content">
      <KView v-for="(goods,index) in goodsList" :key="`goods_${goods.defId}`">
        <auction-item :class="getItemClassName(index)" :goods="goods" @item-click="itemClick"></auction-item>
      </KView>
    </KView>

    <KView class="auction-view-more" v-if="loading||pagination.hasNextPage()">
      <sys-loading v-if="loading" :size="60"></sys-loading>
      <KView v-else class="auction-view-btn" @click="lookMore">查看更多</KView>
    </KView>
  </KView>
</template>

<script>
  import SysLoading from 'common/sysLoading';
  import AuctionItem from './auctionItem';

  export default {
    props: {
      goodsList: {
        type: Array,
        required: true
      },
      pagination: {
        type: Object,
        required: true
      },
      nextDataFun: {
        type: Function,
        required: true
      }
    },

    data() {
      return {
        loading: false
      };
    },

    methods: {
      lookMore() {
        if (this.loading) {
          return;
        }

        let pagination = this.pagination;
        if (!pagination.hasNextPage()) {
          return;
        }

        pagination.nextPage();
        this.loading = true;
        this.nextDataFun().then(() => {
          this.loading = false;
        }).catch(() => {
          this.loading = false;
        });
      },

      getItemClassName(index) {
        if (index % 2 === 0) {
          return 'auction-view-left';
        }
        return 'auction-view-right';
      },

      itemClick(goods) {
        this.$emit('item-click', goods);
      }
    },

    components: {
      SysLoading,
      AuctionItem
    }
  };

</script>

<style lang="scss">
  .auction-view {
    height: 100%;
    overflow: auto;
    padding: 0 formatPx(30);

    .auction-view-content {
      display: flex;
      flex-wrap: wrap;

      >div {
        width: 50%;
        height: formatPx(450);
        margin-bottom: formatPx(40);

        .auction-view-item {
          width: formatPx(325);

          &.auction-view-left {
            float: left;
          }

          &.auction-view-right {
            float: right;
          }
        }
      }
    }

    .auction-view-more {
      height: formatPx(66);
      position: relative;
      margin-bottom: formatPx(40);

      .auction-view-btn {
        text-align: center;
        width: formatPx(255);
        height: 100%;
        line-height: formatPx(65);
        border: 1px solid #999999;
        font-size: formatPx(30);
        margin: auto;
        border-radius: formatPx(33);
      }
    }
  }

</style>
